<!--
 * @Author: guo wei
 * @LastEditors: [guo wei]
 * @LastEditTime: 2024-03-08 23:13:10
 * @Description: 
-->
<template>
  <div class="report-wrap" @click="resetCanvas">
    <div class="report-header">
      <el-page-header :icon="House">
        <template #content>
          <div class="page-content">
            <span v-if="isEditTitle" class="page-title font-600">
              {{ pageTitle }}
            </span>
            <el-input v-else v-model="pageTitle" placeholder="Please input" />
            <el-button
              @click="isEditTitle = !isEditTitle"
              style="margin-left: 15px"
              link
              :icon="EditPen"
            />
          </div>
        </template>
      </el-page-header>
      <div class="right-header-content">
        <el-button type="primary">保存</el-button>
        <el-button @click="dialogVisible = true">建筑类型</el-button>
        <el-button type="primary">材料匹配</el-button>
        <el-dropdown @command="handleCommand">
          <el-button
            ><el-icon class="el-icon--right"><More /></el-icon
          ></el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">返回上一步</el-dropdown-item>
              <el-dropdown-item command="b">导出PPT</el-dropdown-item>
              <el-dropdown-item command="c">导出PDF</el-dropdown-item>
              <el-dropdown-item command="c">另存为</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-avatar :size="30" :src="circleUrl" />
      </div>
    </div>
    <div class="report-content">
      <div class="report-box">
        <div class="report-ppt-item item-first">
          <img
            class="first-banner"
            src="@/assets/images/ppt-banner.png"
            alt=""
          />
          <div class="item-first-bottom">
            <div class="first-item-title">{{ pageTitle }}</div>
            <div class="item-date">{{ new Date() }}</div>
          </div>
        </div>
        <div class="report-ppt-item item-second">
          <div class="page-title">{{ pageTitle }}</div>
          <div class="brand-title">目录</div>
          <div class="ppt-title">1.立面效果图</div>
          <div class="ppt-title">2.典型单体彩色立面索引</div>
          <div class="ppt-title">3.材料篇</div>
          <div class="ppt-title">4.节点篇</div>
          <div class="page-footer-title">立面控制手册</div>
        </div>
        <div class="report-ppt-item item-third">
          <div class="page-title">1.立面效果图</div>
        </div>
        <div class="report-ppt-item item-forth"></div>
        <div class="report-ppt-item item-fifth">
          <div class="page-title">2.典型单体彩色立面索引</div>
        </div>
        <ModelMap
          :colorType="true"
          @getSceneLength="getSceneLength"
          @getImgData="getImgData"
          :top="canvasTop"
          :activeCanvas="activeCanvas"
          :left="canvasLeft"
          :isEdit="isEdit"
        ></ModelMap>
        <div
          class="report-ppt-item item-sixth fif"
          v-for="(item, index) in cameraImgData"
          :key="item"
        >
          <div class="page-title">立面分色图</div>
          <div class="container" :id="'container_' + index">
            <el-button
              :icon="More"
              size="small"
              @click.stop="editCanvas(item, index)"
              class="edit-btn"
            >
            </el-button>
            <div class="canvas-wrap">
              <div style="flex: 1" ref="canvasRef">
                <img
                  :src="item.url"
                  style="width: 480px; height: 460px"
                  alt=""
                  v-if="!item.isEdit"
                />
                {{ item.name }}{{ item.colorType }}
              </div>
            </div>
            <el-table
              :data="cameraTableData"
              style="margin-right: 15px; flex: 1"
            >
              <el-table-column prop="date" label="配色" />
              <el-table-column prop="name" label="使用部位" />
              <el-table-column prop="address" label="材料名" />
              <el-table-column>
                <template #header>
                  <el-dropdown>
                    <span class="el-dropdown-link"> 操作 </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>全选</el-dropdown-item>
                        <el-dropdown-item>删除选中</el-dropdown-item>
                        <el-dropdown-item>清空其他材料</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <img :src="item" style="width: 500px; height: 300px" alt="" /> -->
        </div>
        <!-- <ModelMap2
          :colorType="false"
          @getSceneLength="getSceneLength"
        ></ModelMap2> -->
        <div class="report-ppt-item item-seventh">
          <div class="page-title">材料篇</div>
          <div class="page-bottom-desc">
            i.材料篇（包含各部位外立面材料编号、部位、材料、颜色、加工工艺、参考图片、节点详图、及材料厂家信息等相关必要信息）
          </div>
        </div>
        <div class="report-ppt-item item-eighth">
          <div class="page-header">
            <div class="page-title">立面材料表</div>
            <el-button type="primary" @click="matchByGreyTable">
              智能匹配
            </el-button>
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="材料编号">
              <template #default="scope">
                <el-input v-model="scope.row.code"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="部位">
              <template #default="scope">
                <el-select v-model="scope.row.part" placeholder="请选择">
                  <el-option label="使用部位1" value="0" />
                  <el-option label="使用部位2" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="材料">
              <template #default="scope">
                <el-select v-model="scope.row.material" placeholder="请选择">
                  <el-option label="葡萄牙米黄铝材" value="0" />
                  <el-option label="铝型材" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="color" label="颜色" />
            <el-table-column prop="tech" label="加工工艺" />
            <el-table-column prop="address" label="参考图片">
              <template #default="scope">
                <img
                  :src="scope.row.img"
                  alt=""
                  style="width: 80px; height: 80px"
                />
              </template>
            </el-table-column>
            <el-table-column prop="address" label="案例图片">
              <template #default="scope">
                <img
                  :src="scope.row.case"
                  alt=""
                  style="width: 100px; height: 100px"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="report-ppt-item item-eighth">
          <div class="page-header">
            <div class="page-title">材料信息表</div>
            <el-button type="primary" @click="matchByGreyTable">
              智能匹配
            </el-button>
          </div>
          <el-table :data="materialTableData" border style="width: 100%">
            <el-table-column label="材料" prop="name"> </el-table-column>
            <el-table-column prop="img" label="参考图片">
              <template #default="scope">
                <img
                  :src="scope.row.img"
                  alt=""
                  style="width: 80px; height: 80px"
                />
              </template>
            </el-table-column>
            <el-table-column prop="address" label="品牌">
              <template #default="scope">
                <el-select v-model="scope.row.brand" placeholder="请选择">
                  <el-option label="上迪" value="0" />
                  <el-option label="三泰" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="specifications" label="规格" />
            <el-table-column prop="model" label="型号" />
            <el-table-column prop="address" label="产地"> </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="Manufacturer" label="材料厂家信息">
            </el-table-column>
          </el-table>
        </div>
        <div class="report-ppt-item item-seventh">
          <div class="page-title">节点篇</div>
          <div class="page-bottom-desc">
            i.节点篇（包含各部位外立面主要节点的局部透视彩图、节点详图）
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="Tips" width="30%">
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted, nextTick, provide } from "vue";
import Viewer from "../viewer/viewer.js";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { House, EditPen, More } from "@element-plus/icons-vue";
import ModelMap from "../viewer/index.vue";
// import ModelMap2 from "../viewer/view2.vue";
const pageTitle = ref("成都万科天空之城");
const isEditTitle = ref(true);
const dialogVisible = ref(false);
const isEdit = ref(true);
const cameraImgData = ref([]);
const cameraTableData = ref([]);
const circleUrl = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);
const loadingInstance = ElLoading.service({ fullscreen: true });
const sceneLength = ref(1);
const getSceneLength = (length) => {
  sceneLength.value = length;
};
const getImgData = (data) => {
  console.log("refreshCmera", data);
  cameraImgData.value = data.map((x) => {
    return { ...x, isEdit: false };
  });
  if (data) {
    loadingInstance.close();
  }
};
function offsetTop(elements) {
  var top = elements.offsetTop;
  var parent = elements.offsetParent;
  while (parent != null) {
    top += parent.offsetTop;
    parent = parent.offsetParent;
  }
  // console.log(top);
  return top;
}
function offsetLeft(elements) {
  var left = elements.offsetLeft;
  var parent = elements.offsetParent;
  while (parent != null) {
    left += parent.offsetLeft;
    parent = parent.offsetParent;
  }

  return left;
}
const canvasTop = ref(-1000);
const activeCanvas = ref();
const canvasLeft = ref(0);
const canvasRef = ref([]);
const editCanvas = (item, index) => {
  activeCanvas.value = index;
  cameraImgData.value = cameraImgData.value.map((x) => {
    return { ...x, isEdit: false };
  });
  item.isEdit = true;
  console.log("位移top", offsetTop(canvasRef.value[index]), index);
  canvasTop.value = offsetTop(canvasRef.value[index]);
  canvasLeft.value = offsetLeft(canvasRef.value[index]);
};
const resetCanvas = () => {
  console.log("冒泡了");
  cameraImgData.value = cameraImgData.value.map((x) => {
    return { ...x, isEdit: false };
  });
};
const tableData = ref([
  {
    code: "S1",
    part: "1",
    material: "1",
    color: "米黄色CBCC1301",
    tech: "火烧面",
    img: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    case: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  },
  {
    code: "M1",
    part: "1",
    material: "1",
    color: "米黄色CBCC1301",
    tech: "火烧面",
    img: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    case: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  },
  {
    code: "S1",
    part: "1",
    material: "1",
    color: "米黄色CBCC1301",
    tech: "火烧面",
    img: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    case: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  },
  {
    code: "M1",
    part: "1",
    material: "1",
    color: "米黄色CBCC1301",
    tech: "火烧面",
    img: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    case: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
  },
]);
const materialTableData = ref([
  {
    name: "葡萄牙米黄铝材",
    img: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    brand: "0",
    specifications: "干挂石材常用厚度：花岗岩光面25mm",
    model: "SD-10-2000",
    address: "福建",
    price: "999",
    Manufacturer: "上海久久石业有限公司",
  },
  {
    name: "铝材",
    img: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    brand: "1",
    specifications: "干挂石材常用厚度：花岗岩光面25mm",
    model: "SD-10-2000",
    address: "山东",
    price: "999",
    Manufacturer: "上海上迪铝业有限公司",
  },
  {
    name: "葡萄牙米黄铝材",
    img: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    brand: "0",
    specifications: "干挂石材常用厚度：花岗岩光面25mm",
    model: "SD-10-2000",
    address: "福建",
    price: "999",
    Manufacturer: "上海久久石业有限公司",
  },
  {
    name: "铝材",
    img: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    brand: "1",
    specifications: "干挂石材常用厚度：花岗岩光面25mm",
    model: "SD-10-2000",
    address: "山东",
    price: "999",
    Manufacturer: "上海上迪铝业有限公司",
  },
]);
const matchByGreyTable = () => {
  ElMessageBox.confirm(
    "将基于立面分色图/材料图匹配对应材料信息，请确认立面分色图/材料图信息是否正确?",
    "提示",
    {
      confirmButtonText: "继续匹配",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "匹配成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消",
      });
    });
};
</script>
<style lang="scss" scoped>
.report-wrap {
  // height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
  .report-header {
    height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0px 30px;
    margin: 20px 0;
    position: fixed;
    width: 100%;
    .el-page-header {
      width: auto;
      background: #fff;
      border-radius: 10px;
      padding-left: 20px;
      display: flex;
      align-items: center;
      :deep .el-page-header__breadcrumb {
        margin-bottom: 0;
      }
      .page-title {
        color: #999;
      }
      .page-content {
        display: flex;
        align-items: center;
      }
    }
    .right-header-content {
      display: flex;
      align-items: center;
      .el-avatar {
        margin-left: 10px;
      }
      .el-dropdown {
        margin-left: 10px;
      }
    }
  }
  .report-content {
    flex: 1;
    padding-top: 60px;
    .report-box {
      width: 1200px;
      margin: 0 auto;

      .report-ppt-item {
        width: 840px;
        height: 594px;
        background: #fff;
        border-radius: 20px;
        margin-top: 40px;
        margin: 40px auto;

        &.item-first {
          display: flex;
          flex-direction: column;
          justify-content: center;
          // align-items: center;
          img {
            width: 100%;
            flex: 1;
          }
          .item-first-bottom {
            height: 180px;
            padding: 20px;
            .first-item-title {
              font-size: 36px;
              font-weight: bold;
            }
            .item-date {
              margin-top: 20px;
            }
          }
        }
        &.item-second {
          .page-title {
            padding: 30px;
            text-align: right;
            font-size: 22px;
            font-weight: bold;
          }
          .brand-title {
            padding: 25px;
            text-align: left;
            padding-left: 100px;
            font-size: 36px;
            font-weight: bold;
            color: #cac226;
          }
          .ppt-title {
            padding: 20px;
            text-align: left;
            padding-left: 100px;
            font-size: 30px;
            font-weight: bold;
            color: #ba6b10;
          }
          .page-footer-title {
            padding: 30px;
            text-align: right;
            font-size: 26px;
            font-weight: bold;
            color: #cac226;
          }
        }
        &.item-third {
          .page-title {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            font-weight: bold;
            color: #ba6b10;
          }
        }
        &.item-fifth {
          .page-title {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            font-weight: bold;
            color: #ba6b10;
          }
        }
        &.item-sixth {
          .container {
            // width: 100%;
            padding: 20px;
            margin: 20px;
            height: 500px;
            // padding-right: 200px;
            // box-sizing: border-box;
            border: 1px dashed #e0e0e0;
            position: relative;
            display: flex;
            .edit-btn {
              position: absolute;
              top: -10px;
              left: 250px;
              display: none;
            }
            &:hover {
              .edit-btn {
                display: block;
              }
            }
            .canvas-wrap {
              width: 520px;
              //width: 100%;
              height: 500px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 20px;
              margin-top: 0;
              // border: 1px dashed #e0e0e0;
              // position: relative;
            }
          }
          .page-title {
            padding: 20px;
            text-align: left;
            padding-left: 50px;
            font-size: 22px;
            font-weight: bold;
            color: #ba6b10;
          }
        }
        &.item-seventh {
          display: flex;
          flex-direction: column;
          padding: 20px;

          .page-title {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            font-weight: bold;
            color: #ba6b10;
          }
          .page-bottom-desc {
            border-top: 1px dashed #ba6b10;
            padding: 20px;
            height: 80px;
            color: #ba6b10;
          }
        }
        &.item-eighth {
          display: flex;
          flex-direction: column;
          padding: 20px;
          .page-header {
            display: flex;
            justify-content: space-between;
            padding: 20px 10px;
          }

          .page-title {
            flex: 1;

            font-size: 22px;
            font-weight: bold;
            color: #ba6b10;
          }
        }
      }
    }
  }
}
</style>
